<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录窗口</title>
    <script src="js/jquery-1.11.3.js"></script>
    <link href="css/login.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="main_div">
      <div class="title">用户登录中心</div>
      <div class="input_text_div">
        <i class="username"></i>
        <input type="text" id="UserName" placeholder="用户注册账号" />
      </div>
      <div class="input_text_div">
        <i class="userpassword"></i>
        <input type="text" id="UserPassword" placeholder="用户登录密码" />
      </div>
      <div class="code_div">
        <i class="code"></i>
        <input type="text" id="code" placeholder="验证码" />

        <img
          id="codeImg"
          onclick="createCode()"
          src="http://localhost:8080/user/code"
          alt="无"
        />
      </div>
      <div class="remberAndForget">
        <label for="remberMe"
          ><input
            id="remberMe"
            type="checkbox"
            style="display: none !important"
          /><span><span></span></span><a>记住我</a>
        </label>
        <div class="forgetPas"><a onclick="findPassword()">忘记密码？</a></div>
      </div>
      <div class="butten_div">
        <a onclick="login()">登&nbsp;&nbsp;录</a>
        <i>还没账号?<a onclick="regist()">点击此处</a>注册</i>
      </div>
    </div>
  </body>
  <script>
    /**
     * 注释
     */
    var codeKey;

    $(function () {
      codeKey = Math.random() * 100000;
      createCode();
    });

    function login() {
      var name = $("#UserName").val();
      var password = $("#UserPassword").val();
      var code = $("#code").val();
      if (name == null || name.trim() == "") {
        alert("用户名不能为空");
        return;
      }
      if (password == null || password.trim() == "") {
        alert("密码不能为空");
        return;
      }
      if (code == null || code.trim() == "") {
        alert("验证码不能为空");
        return;
      }
      var formData = new FormData();
      formData.append("username", name);
      formData.append("userpassword", password);
      formData.append("code", code);
      formData.append("codekey", codeKey);
      $.ajax({
        type: "post",
        url: "http://localhost:8080/user/login",
        dataType: "JSON",
        data: formData,
        contentType: false,
        processData: false,
        success: function (mes) {
          if (mes.code == "0") {
            alert("验证码错误");
          }
          if (mes.code == "100") {
            alert("用户名或密码错误");
          }
          if (mes.code == "200") {
            if ($("#remberMe").get(0).checked) {
              localStorage.setItem("uid", mes.ext.user.id);
              localStorage.setItem("username", mes.ext.user.username);
              localStorage.setItem("header", mes.ext.user.header);
              localStorage.setItem("nickname", mes.ext.user.nickname);
              localStorage.setItem("happyBean", mes.ext.user.happyBean);
            } else {
              sessionStorage.setItem("uid", mes.ext.user.id);
              sessionStorage.setItem("username", mes.ext.user.username);
              sessionStorage.setItem("header", mes.ext.user.header);
              sessionStorage.setItem("nickname", mes.ext.user.nickname);
              sessionStorage.setItem("happyBean", mes.ext.user.happyBean);
            }
            location.href = "gameHome.html";
          }
          createCode();
        },
        false: function (mes) {
          alert("网络错误");
          console.log(mes);
        },
      });
    }
    function regist() {
      location.href = "regist.html";
    }
    function findPassword() {
      location.href = "findpassword.html";
    }
    function createCode() {
      $("#codeImg").attr(
        "src",
        "http://localhost:8080/user/code?codeKey=" +
          codeKey +
          "&time=" +
          new Date().getTime()
      );
    }
  </script>
</html>
